<template>
  <div class="app-container">
    <!-- Header Section -->
    <div class="header-section">
      <div class="header-top">
        <h1 class="header-title">神券</h1>
        <div class="header-menu">⋯</div>
      </div>
      <div class="balance-card">
        <div class="coin-icon">👋</div>
        <div class="balance-info">
          <span class="user-id">TMp218⋯⋯ 累计已省</span>
          <span class="balance-amount">
            <span class="text-red">812</span>元
          </span>
        </div>
      </div>
    </div>

    <!-- My Coupons Section -->
    <div class="content-card my-coupons-section">
      <div class="section-header">
        <h2 class="section-title">我的神券</h2>
        <span class="available-count">
          可用<span class="text-red font-bold">15</span>张&gt;
        </span>
      </div>

      <div class="coupon-grid">
        <div
          v-for="(coupon, index) in myCoupons"
          :key="index"
          class="coupon-card"
        >
          <div class="coupon-tag" :class="coupon.tagClass">
            {{ coupon.tag }}
          </div>
          <div class="coupon-content">
            <div class="coupon-type font-bold">{{ coupon.type }}</div>
            <div class="coupon-amount text-center">¥{{ coupon.amount }}</div>
            <div class="coupon-validity text-center">{{ coupon.condition }}</div>
            <div class="coupon-validity text-center">{{ coupon.validity }}</div>
            <button @click="useCoupon(coupon)" class="use-button">
              去使用
            </button>
          </div>
        </div>
      </div>

      <div class="promotion-banner">
        <div class="promotion-tag">VIP</div>
        <span class="promotion-text">5.23-6.18期间，VIP用户能抽能领峰值18个券哦</span>
      </div>
    </div>


    <!-- Daily Check-in Section -->
    <div class="content-card checkin-section">
      <div class="section-header">
        <div>
          <h2 class="section-title">签到领神券</h2>
          <p class="section-subtitle">本周期5.27-9.1 200期</p>
        </div>
        <span class="reminder-toggle">
          提醒我 <input type="checkbox" class="toggle-switch" />
        </span>
      </div>

      <div class="checkin-grid">
        <div
          v-for="(day, index) in checkInDays"
          :key="index"
          class="checkin-day"
        >
          <div class="day-amount" :class="{ 'question-mark': !day.amount }">
            <span v-if="day.amount">¥{{ day.amount }}</span>
            <span v-else>{{ day.icon }}</span>
          </div>
          <button
            @click="checkIn(day, index)"
            :class="{ claimed: day.claimed }"
            class="checkin-button"
          >
            {{ day.claimed ? "已签" : "签到领" }}
          </button>
          <div class="day-label">{{ day.day }}</div>
        </div>
      </div>
    </div>

    <!-- Custom Notification Modal -->
    <div v-if="notification.isOpen" class="notification-overlay" @click="closeNotification">
      <div class="notification-modal-new" @click.stop>
        <div class="modal-header-new">
          <h3 class="modal-title-new">{{ notification.title || '膨胀外卖神券' }}</h3>
        </div>
        
        <div class="voucher-display">
          <div class="voucher-card-left">
            <div class="voucher-amount">¥5</div>
            <div class="voucher-condition">满30可用</div>
            <div class="voucher-action-btn">神券通用</div>
          </div>
          
          <div class="voucher-arrow">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M9 18l6-6-6-6" stroke="#FF6B6B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          
          <div class="voucher-card-right">
            <div class="voucher-category">美食</div>
            <div class="voucher-amount-large">¥?</div>
            <div class="voucher-condition">满30可用</div>
            <div class="voucher-action-btn-primary">膨胀商家可用</div>
          </div>
        </div>
        
        <div class="notification-description">
          {{ notification.message }}
        </div>
        
        <button @click="closeNotification" class="inflate-button">
          确认领取
        </button>
      </div>
    </div>
  </div>
   <AppFooter/>
</template>

<script setup>
import AppFooter from '../../components/AppFooter.vue';
import { ref, reactive, onMounted } from 'vue'

// 响应式数据
const notification = reactive({
  isOpen: false,
  message: '',
  title: ''
})

const myCoupons = ref([])
const couponPackages = ref([])
const checkInDays = ref([])

// 获取动态日期
const getExpiryDate = (daysToAdd) => {
  const date = new Date()
  date.setDate(date.getDate() + daysToAdd)
  return `${date.getMonth() + 1}/${date.getDate()}日到期`
}

// 显示通知
const showNotification = (message, title = '膨胀外卖神券') => {
  notification.isOpen = true
  notification.message = message
  notification.title = title
  
  // 3秒后自动关闭
  setTimeout(() => {
    closeNotification()
  }, 3000)
}

// 关闭通知
const closeNotification = () => {
  notification.isOpen = false
  notification.message = ''
  notification.title = ''
}

// 使用优惠券
const useCoupon = (coupon) => {
  showNotification(`已使用 ¥${coupon.amount} ${coupon.type}，祝您用餐愉快！`)
}

// 抽取券包
const drawCoupon = (packageItem) => {
  showNotification(`恭喜您抽取到 ${packageItem.amount} 券包！已自动添加到您的账户`)
}

// 签到
const checkIn = (day, index) => {
  if (!day.claimed) {
    checkInDays.value[index].claimed = true

    if (day.amount) {
      showNotification(`签到成功！获得 ¥${day.amount} 神券，继续加油哦！`)
    } else {
      showNotification('签到成功！明天记得再来哦！')
    }
  }
}

// 初始化数据
onMounted(() => {
  myCoupons.value = [
    {
      tag: '满减券',
      tagClass: 'tag-orange',
      type: '外卖神券',
      amount: 10,
      condition: '无门槛',
      validity: getExpiryDate(1),
    },
    {
      tag: '满减券',
      tagClass: 'tag-orange',
      type: '外卖神券',
      amount: 7,
      condition: '无门槛',
      validity: getExpiryDate(1),
    },
    {
      tag: '满减券',
      tagClass: 'tag-orange',
      type: '外卖神券',
      amount: 8,
      condition: '满10可用',
      validity: '明日到期',
    },
  ]

  couponPackages.value = [
    {
      amount: '5元 × 6张',
      count: '无门槛',
      value: 30,
      label: '购买',
      buttonText: '可免费抽取',
    },
    {
      amount: '5元 × 12张',
      count: '无门槛',
      value: 60,
      label: '购买',
      buttonText: '可免费抽取',
    },
    {
      amount: '5元',
      count: '超实惠',
      value: 100,
      label: '购买',
      buttonText: '可免费',
    },
  ]

  checkInDays.value = [
    { day: '今天', amount: 10, claimed: false },
    { day: '明天', icon: '?', claimed: false },
    { day: '连续3天', amount: 5, claimed: false },
    { day: '第4天', icon: '?', claimed: false },
    { day: '连续5天', amount: 8, claimed: false },
    { day: '第6天', icon: '?', claimed: false },
    { day: '连续7天', amount: 10, claimed: false },
  ]
})
</script>

<style scoped>
/* 基础样式 - 适配750px */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

.app-container {
  max-width: 750px;
  margin: 0 auto;
  background-color: #f0f2f5;
  min-height: 100vh;
  width: 100%;
  transform: scale(1);
}

/* 工具类 */
.text-red {
  color: #ff385c !important;
}

.font-bold {
  font-weight: bold !important;
}

.text-center {
  text-align: center;
}

/* 头部样式 */
.header-section {
  background: linear-gradient(to right, #ff385c, #ff385c);
  color: white;
  padding: 20px 20px 25px;
  border-radius: 0 0 20px 20px;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-title {
  font-size: 24px;
  font-weight: bold;
}

.header-menu {
  font-size: 32px;
}

.balance-card {
  background-color: #FFEBF7;
  border-radius: 15px;
  padding: 18px;
  display: flex;
  align-items: center;
}

.coin-icon {
  width: 40px;
  height: 40px;
  background-color: #ffcc00;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 20px;
}

.user-id {
  font-size: 18px;
  opacity: 0.9;
  color: #000 !important;
}

.balance-amount {
  font-size: 26px;
  font-weight: bold;
  margin-left: 8px;
  color: #000 !important;
}

/* 内容卡片通用样式 */
.content-card {
  background-color: white;
  border-radius: 18px;
  margin: 20px;
  padding: 20px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-title {
  margin-right: 8px;
  float: left;
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.section-subtitle {
  width: 280px;
  font-size: 16px;
  color: #999;
  margin-top: 4px;
}

.available-count {
  font-size: 16px;
  color: #999;
  font-weight: bold !important;
}

.more-link {
  font-size: 16px;
  color: #1890ff;
}

/* 我的神券样式 */
.coupon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.coupon-card {
  background: linear-gradient(to bottom right, #fff9f0, #fff3e0);
  border: 1px solid #ffe0b2;
  border-radius: 12px;
  padding: 15px;
  position: relative;
  height: 180px;
  display: flex;
  flex-direction: column;
}

.coupon-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 4px;
  color: white;
}

.tag-orange {
  background-color: #ff6e40;
}

.coupon-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding-top: 25px;
}

.coupon-type {
  font-size: 16px;
  color: #666;
  margin-bottom: 4px;
}

.coupon-amount {
  font-size: 28px;
  font-weight: bold;
  color: #ff385c;
  margin-bottom: 4px;
}

.coupon-validity {
  font-size: 14px;
  color: #999;
  margin-bottom: 4px;
}

.use-button {
  background-color: #ffcc00;
  border: none;
  border-radius: 20px;
  color: #333;
  font-size: 16px;
  font-weight: bold;
  padding: 8px 0;
  width: 100%;
  cursor: pointer;
  transition: all 0.2s;
}

.use-button:hover {
  background-color: #ffbb00;
  transform: scale(0.98);
}

.promotion-banner {
  background-color: #f0f4ff;
  border-radius: 12px;
  padding: 15px;
  display: flex;
  align-items: center;
}

.promotion-tag {
  background-color: #7e57c2;
  color: white;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 4px;
  margin-right: 12px;
}

.promotion-text {
  font-size: 16px;
  color: #7e57c2;
}

/* 神券包样式 */
.package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.package-item {
  text-align: center;
}

.package-info {
  margin-bottom: 12px;
}

.package-amount {
  font-size: 18px;
  font-weight: bold;
  color: #ff385c;
}

.package-count {
  font-size: 16px;
  color: #999;
}

.draw-button {
  background-color: #ff385c;
  border: none;
  border-radius: 20px;
  color: white;
  font-size: 16px;
  padding: 8px 0;
  width: 100%;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.draw-button:hover {
  background-color: #e0264a;
  transform: scale(0.98);
}

.package-value {
  font-size: 16px;
}

.value-amount {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.value-label {
  font-size: 16px;
  color: #999;
  margin-left: 4px;
}

.usage-info {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
  margin-bottom: 15px;
  font-size: 16px;
  color: #666;
}

.platform-info {
  display: flex;
  align-items: center;
  margin-left: 15px;
}

.platform-icon {
  font-size: 18px;
  margin-right: 4px;
}

.platform-text {
  margin-right: 8px;
}

.platform-more {
  color: #999;
}

.terms-info {
  text-align: center;
  font-size: 14px;
  color: #999;
}

/* 签到领神券样式 */
.checkin-section {
  padding-bottom: 25px;
}

.reminder-toggle {
  font-size: 16px;
  color: #666;
  display: flex;
  align-items: center;
}

.toggle-switch {
  width: 40px;
  height: 20px;
  margin-left: 8px;
}

.checkin-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.checkin-day {
  text-align: center;
}

.day-amount {
  width: 50px;
  height: 50px;
  margin: 0 auto 8px;
  background-color: #ff385c;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 18px;
}

.question-mark {
  font-size: 24px;
}

.checkin-button {
  background-color: #ffcc00;
  border: none;
  border-radius: 15px;
  color: #333;
  font-size: 14px;
  padding: 4px 0;
  width: 100%;
  margin-bottom: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.checkin-button:hover {
  background-color: #ffbb00;
  transform: scale(0.98);
}

.checkin-button.claimed {
  background-color: #e0e0e0;
  color: #999;
}

.day-label {
  font-size: 14px;
  color: #999;
}

/* 新的通知样式 - 仿照图片风格 */
.notification-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.notification-modal-new {
  background: linear-gradient(135deg, #FFE8E8 0%, #FFF0F5 50%, #FFE8E8 100%);
  border-radius: 24px;
  padding: 24px 20px;
  max-width: 340px;
  width: 100%;
  box-shadow: 0 20px 40px rgba(255, 107, 107, 0.3);
  transform: scale(1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.notification-modal-new::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
  pointer-events: none;
}

.modal-header-new {
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.modal-title-new {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.voucher-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.voucher-card-left,
.voucher-card-right {
  background: white;
  border-radius: 12px;
  padding: 12px;
  flex: 1;
  text-align: center;
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.15);
  position: relative;
}

.voucher-card-right {
  border: 2px solid #FF6B6B;
}

.voucher-arrow {
  margin: 0 8px;
  display: flex;
  align-items: center;
}

.voucher-category {
  background: #FF6B6B;
  color: white;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  display: inline-block;
  margin-bottom: 4px;
}

.voucher-amount {
  font-size: 20px;
  font-weight: bold;
  color: #FF6B6B;
  margin-bottom: 2px;
}

.voucher-amount-large {
  font-size: 24px;
  font-weight: bold;
  color: #FF6B6B;
  margin-bottom: 2px;
}

.voucher-condition {
  font-size: 11px;
  color: #666;
  margin-bottom: 6px;
}

.voucher-action-btn {
  background: #FF6B6B;
  color: white;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

.voucher-action-btn-primary {
  background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%);
  color: white;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

.notification-description {
  text-align: center;
  font-size: 12px;
  color: #666;
  margin-bottom: 20px;
  line-height: 1.4;
  position: relative;
  z-index: 1;
}

.inflate-button {
  width: 100%;
  background: linear-gradient(135deg, #FF6B6B 0%, #E91E63 50%, #FF6B6B 100%);
  color: white;
  border: none;
  padding: 14px 24px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}

.inflate-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 107, 107, 0.5);
}

.inflate-button:active {
  transform: translateY(0);
}

/* 响应式调整 */
@media (max-width: 480px) {
  .notification-modal-new {
    margin: 20px;
    max-width: calc(100% - 40px);
    padding: 20px 16px;
  }
  
  .voucher-display {
    flex-direction: column;
    gap: 12px;
  }
  
  .voucher-arrow {
    transform: rotate(90deg);
    margin: 4px 0;
  }
  
  .voucher-card-left,
  .voucher-card-right {
    width: 100%;
  }
}
</style>
